<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>修改个人头像 - 会员中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="夜读书">
    <meta name="description" content="夜读书中文网">
    <meta name="keywords" content="读书,阅读,小说,文学">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('/bootstrap-3.3.5-dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/style/css/yds.css') }}">
    <link rel="stylesheet" href="{{ asset('/style/css/ucenter.css') }}">
    <script src="{{ asset('/scripts/jquery/jquery-3.1.1.min.js') }}"></script>
    <script src="{{ asset('/jcrop/jquery.min.js') }}"></script>
    <script src="{{ asset('/bootstrap-3.3.5-dist/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('/jcrop/jquery.Jcrop.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ asset('/jcrop/jquery.Jcrop.css') }}" type="text/css" />
<style>
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
</head>
<body>
@include('books.partials.navtop')
@include('books.partials.nav')
<div id="yds_screen">
<div id="yds_content" class="clearfix">
@include('ucenter.partials.adminmenu')
  <div class="spaceList adminbody">
    <div class="adminhead">
        <h1>修改个人头像</h1>
    </div>
    <div class="admincontent mainform" style="height:430px;">
        <form id="fileinfo" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <input class="file" type="button" id="caijian" name="caijian" value="上传">
            <a class="file" style="float:left;margin-right:20px;">选择图片
            <input type="file" id="facefile" name="facefile"></a>
        </form>
        <div id="imgbox" style="width:400px;height:400px;background-color:#f6f6f6;margin:10px;overflow:hidden; float:left;">
            <!-- <img> -->
        </div>
        <div style="width:300px;height:400px;display:table;">
            <div style="width:200px;height:200px;margin:10px;overflow:hidden;">
            @if($users->avatar_file!='')
                <img style="" id="preview2" src="{{ url($users->avatar_file) . '?t=' . time() }}" />
            @else
                <img style="width:200px;height:200px;" id="preview2" src="{{ url('usersface/default/avatar-max.png') . '?t=' . time() }}" />
            @endif
            </div>            
            <div style="margin:10px;font-size:12px;">200 × 200</div>
            <div style="width:50px;height:50px;margin:10px;overflow:hidden;">
            @if($users->avatar_file_min!='')
                <img style="" id="preview" src="{{ url($users->avatar_file_min) . '?t=' . time() }}" />
            @else
                <img style="width:50px;height:50px;" id="preview" src="{{ url('usersface/default/avatar-min.png') . '?t=' . time() }}" />
            @endif
            </div>
            <div style="margin:10px;font-size:12px;">50 × 50</div>
        </div>
        <form action="" method="post">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
        </form>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>
</div>
@include('books.partials.footer')

<script type="text/javascript">    

    $('#facefile').change(function(){
            var formData = new FormData($('#fileinfo')[0]);
            $.ajax({                  
                //上传头像图片路径，成功返回OK
                url: '{{url('uploadface')}}',                       
                type: 'post', 
                data: formData,
                //async: false, 
                //dataType: 'json',
                cache: false,  
                contentType: false,  
                processData: false,
                success: function (data) {
                    //alert(data);
                    if(data == 'ok'){
                        var fileType = getFileName();
                        //alert(fileType);
                        $('#imgbox').html('<img style="max-width: 400px;max-height: 400px" id="target" src="{{url('usersface/source/'. 'face_' . $users->uid . '.')}}'+ fileType +'{{'?t=' . time()}}"/>');                        
                        $('#preview2').attr('src','{{url( 'usersface/source/'. 'face_'. $users->uid . '.' )}}'+ fileType +'{{'?t=' . time()}}');
                        $('#preview').attr('src','{{url( 'usersface/source/'. 'face_'. $users->uid . '.' )}}'+ fileType +'{{'?t=' . time()}}');
                        jcrop();
                    }else{
                        //上传文件有问题，输出错误信息
                        alert(data); 
                    }
                }
            });
    });

    $('#caijian').click(function(){
        if(!parseInt($('#w').val())){
            alert('请选择截取范围。');
            return false;
        }
        else{
            $.ajax({
                type: 'post',   
                url: '{{url('cutface')}}',
                //dataType: 'html',
                data: {
                    'image': $('img#target').attr('src'),
                    'x': $('#x').val(),
                    'y': $('#y').val(),
                    'w': $('#w').val(),
                    'h': $('#h').val(),
                    '_token': '{{csrf_token()}}'
                },
                success: function (data) {
                    //显示提示信息
                    alert(data);                    
                }
            });
        }
    });
  
    function getFileName(){
        //获得上传文件的扩展名
        var fileName = $('#facefile').val();
        var ldot = fileName.lastIndexOf(".");
        var type = fileName.substring(ldot + 1); 
        return type; 
    }

    function jcrop(){
      //jscrop上传图片插件
      var jcrop_api, boundx, boundy;
      
      $('#target').Jcrop({
        minSize: [50,50],
        setSelect: [0,0,200,200],
        onChange: updatePreview,
        onSelect: updatePreview,
        onSelect: updateCoords,
        aspectRatio: 1
      },
    function(){
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        jcrop_api = this;
    });
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
    function checkCoords()
    {
        if (parseInt($('#w').val())) return true;
        alert('请选择截取范围。');
        return false;
    };
      function updatePreview(c){
        if (parseInt(c.w) > 0)
        {
          var rx = 50 / c.w;        //小头像预览Div的大小
          var ry = 50 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
        {
          var rx = 200 / c.w;       //大头像预览Div的大小
          var ry = 200 / c.h;
          $('#preview2').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };
    }

</script>
</body>
</html>
